<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" >
<head>
    <base th:href="${#request.getContextPath()}+'/'">
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" th:href="@{/lib/bootstrap-3.3.7/css/bootstrap.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/bootstrap-table/bootstrap-table.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui/css/H-ui.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui.admin/css/H-ui.admin.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/Hui-iconfont/1.0.8/iconfont.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui.admin/skin/default/skin.css}" id="skin"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui.admin/css/style.css}"/>
    <title>管理员列表</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 订单管理 <span class="c-gray en">&gt;</span> 订单列表</nav>
<div class="page-container">
	<span id="toolbar" class="l">
		<a href="javascript:;" onclick="order_batch_delete()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>
		<a href="javascript:;" onclick="order_add()" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 添加订单</a>
	</span>

    <table id="dataTable"></table>

</div>



<script type="text/javascript" th:src="@{/lib/jquery-1.11.3/jquery.js}"></script>
<script type="text/javascript" th:src="@{/lib/layer/2.4/layer.js}"></script>
<script type="text/javascript" th:src="@{/h-ui/js/H-ui.min.js}"></script>
<script type="text/javascript" th:src="@{/h-ui.admin/js/H-ui.admin.js}"></script>
<script type="text/javascript" th:src="@{/lib/bootstrap-table/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/bootstrap-table/bootstrap-table-zh-CN.min.js}"></script>



<script type="text/javascript">

    /* 文档加载完毕以后执行代码 */
    $(function(){

        //使用bootstrap插件初始化表格
        $("#dataTable").bootstrapTable({
            url: 'order/list',//ajax请求的url地址
            /*
                ajax请求以后回调函数的处理
                后台使用返回的PageInfo对象中的 结果 级的key是list，总条数是total
                而前台bootstrapTable插件需要的数据的key叫做rows ，总条数也是叫做total
                那么出现一个问题 : 总条数的key能对上，结果集对不上，就需要在ajax请求完成回调
                responseHandler 这个函数方法处理一下
                并且在自定义一个 json,rows做为key，返回json的 list作为值
                    total：还是total
                这样才能满足 bootstrapTable插件数据的需要
            */
            detailView:true,//+显示详情
            pagination: true,//显示分页条
            toolbar: "#toolbar",//顶部显示的工具条（添加和批量删除的）
            contentType: 'application/x-www-form-urlencoded',//条件搜索的时候ajax请求给后台数据的数据类型（条件搜索post提交必须设置）
            search: true,//是否显示搜索框
            pageNumber: 1,//默认的页面 第一页
            pageSize: 10,//默认的每页条数
            pageList:[10,12,25,50,100],//每页能显示的条数
            sidePagination: "server",//是否是服务器分页，每次请求都是对应的10条数据，下一页发送ajax请求
            paginationHAlign: 'right', //底部分页条
            showRefresh: true, //是否显示刷新按钮
            columns: [ //表格显示数据对应的表头设置，
                { checkbox: true},//是否显示前台的复选框（多选）
                /*
                    每列数据的表头的设置
                    filed:返回json数据对应数据的key
                    title:表头要显示的名
                */
                {field: 'orderId',title: '编号'},
                {field: 'shipperName',title: '收货人'},
                {field: 'shipperPhone',title: '收货电话'},
                {field: 'shipperAddress',title: '收货地址'},

                {field: 'takeName',title: '取件联系人'},
                {field: 'takePhone',title: '取件电话'},
                {field: 'takeAddress',title: '取件地址'},

                {field: 'paymentMethod',title: '付款方式'},
                {field: 'takeMethod',title: '取件方式'},
                {field: 'region',title: '货运区间'},
                {field: 'freightMethod',title: '货运方式'},


                {field: 'adminId',title: '业务员'},
                {field: 'customerId',title: '客户'},
                //操作列的设置（删除，修改）
                /*
                formatter: 格式化这一行，回调一个函数
                */
                {
                    field:'orderId',
                    title:'操作',
                    align:'center',
                    formatter:operationFormatter
                }],
            /* 设置ajax请求后台的参数
                params:bootstraptable传递给后台的默认参数名称
                函数可以直接返回一个参数对象，设置给传递给后台的参数名称和值
            */
            queryParams:function(params){
                console.log("params :",params);
                //{search: "", sort: undefined, order: "asc", offset: 20, limit: 10}
                var paramsData = {keyword:params.search,
                    pageSize:params.limit,
                    pageNum:params.offset/params.limit+1}

                return paramsData;
            },
            /* 当点击+出发事件
            *
            * index ：行号
            * row ：当前行的数据
            * $detail : bootStrapTable 表格
            *  创建订单子表思路
            *  使用$detail对象，在当前行下面创建新列，在列中创建一个新表格，在使用BootStrapTable再次根据
            *  当前行的订单id发送请求从后台查询出当前订单的订单数据，展现成一个BootStrapTable表格即可
            *
            * */
            onExpandRow: function (index, row, $detail) {
                //获取当前展开行对应的 订单id
                var orderId = row.orderId;

                //创建一个表格，用户点击+号时候马上创建一个表格（子表），用于添加详细数据
                var cur_table = $detail.html('<table></table>').find('table');

                //把子表变成bootstra-table
                $(cur_table).bootstrapTable({
                    url: 'order/detail',
                    method: 'get',
                    contentType: 'application/json;charset=UTF-8',//这里我就加了个utf-8
                    dataType: 'json',
                    queryParams: { orderId: orderId },
                    pageSize: 10,//默认的每页条数
                    pagination: true,//显示分页条
                    columns: [{
                        field: 'goodsUnit',
                        title: '单位'
                    },{
                        field: 'goodsName',
                        title: '货品名称'
                    },{
                        field: 'goodsNumber',
                        title: '货品数量'
                    },{
                        field: 'goodsTotal',
                        title: '总价'
                    },{
                        field: 'goodsRemark',
                        title: '货品描述'
                    }]
                });

            }

        });

    })

    //订单类型格式化
    function menuFormatter(value,row,index,field){

        var html = "<span style='color:red'>菜单订单</span>";
        if(value=="order"){
            html = "<span style='color:green'>普通订单</span>";
        }
        return html;
    }

    /*
        列格式化函数
        value: the field value. orderId用户的值
        row: the row record data. 整行数据
        index: the row index. 行号
        field: the row field. 字段名称： orderId

        此函数返回一个字符串，html自动解析渲染效果
    */
    function operationFormatter(value,row,index,field){
        //console.log("orderId :"+value);
        var html = "<span onclick='order_del("+value+")' style='color:red;cursor:pointer' class='glyphicon glyphicon-trash'></span>&nbsp;&nbsp;";
        html += "<span onclick='order_update("+value+")' style='color:orange;cursor:pointer' class='glyphicon glyphicon-pencil'></span></span>&nbsp;&nbsp;";
        html += "<span title='显示详细信息' onclick='order_detail("+value+")' style='color:green;cursor:pointer' class='glyphicon glyphicon-zoom-in'></span>";

        return html;
    }


</script>



<script type="text/javascript">



    /*订单-增加*/
    function order_add(){

        layer.open({
            type:2,
            maxmin:true,
            area: [$(window).width()+'px', $(window).height()+'px'],
            title: '新增订单',
            content: 'order/orderEdit'
        });

    }
    /*订单-修改*/
    function order_update(orderId){

        layer.open({
            type:2,
            maxmin:true,
            area: [$(window).width()+'px', $(window).height()+'px'],
            title: '修改订单',
            content: 'order/orderEdit?orderId='+orderId
        });

    }

    /* 订单-详细信息 */
    function order_detail(orderId){

        layer.open({
            type:2,
            maxmin:true,
            area: [$(window).width()+'px', $(window).height()+'px'],
            title: '订单详情',
            content: 'order/detail.do?orderId='+orderId
        });

    }

    /*订单-删除*/
    function order_del(orderId){
        layer.confirm("亲，您确定要删除此条数据?",function(){
            //发送ajax请求删除数据
            $.get("order/delete.do",{orderId:orderId},function(data){

                //提示
                layer.msg(data.msg, {icon: data.code,time:1500},function(){
                    if(data.code == 1){
                        //操作成功，刷新BootStrap-table表格
                        refreshTable();
                    }
                });


            })


        })
    }

    //刷新表格函数
    function refreshTable(){
        $("#dataTable").bootstrapTable('refresh');
    }


    /*订单-编辑*/
    function order_edit(title,url,id,w,h){
        layer_show(title,url,w,h);
    }

</script>
</body>
</html>
